<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0; margin: 0; list-style-type: none;}
        .cont{ display: flex; flex-direction: row;flex-wrap: nowrap;justify-content: flex-start; }
        .cont > span{ transition: all 1s;}
        .cont > span:hover{ transform: scale(1.03);}
        .cont:hover > :not(:hover){ margin: 0 -20px;filter: drop-shadow(0 0 10px #000); transform: perspective(500px) rotateY(45deg) scale(0.95);}
        .cont span:hover ~ span{transform: perspective(500px) rotateY(-45deg) scale(1.02);}

        .conts{ width: 400px; height: 400px; background: red; padding: 20px;}
        .orgis{ width: 100%; height: 100%; background: #000; transition: rotateX 2s skew 1s; transform-origin: center top; }
        .conts:hover{ transition: rotateX 2s skew 1s; transform-origin: center top;}
        .conts:hover .orgis{ transform: rotateX(180deg) skew(10deg); transform-origin: center top; animation: opt 1s ease-out infinite; }
        @keyframes opt {
            to {
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="cont">
         <span style="--i:1;"><img src="pexels-photo-17975892.jpeg" alt="" width="300" height="300"></span>
         <span style="--i:2;"><img src="pexels-photo-17975892.jpeg" alt="" width="300" height="300"></span>
         <span style="--i:3;"><img src="pexels-photo-17975892.jpeg" alt="" width="300" height="300"></span>
         <span style="--i:4;"><img src="pexels-photo-17975892.jpeg" alt="" width="300" height="300"></span>
    </div>


    <div class="conts">
        <div class="orgis">1</div>
    </div>
</body>
</html>